<template>
  <div id="app">
    <!-- 头部 -->
    <TopBar />
    <!-- 导航 -->
    <Header />
    <router-view />
    <!-- 底部 -->
    <Footer />
    <!-- 登录框 -->
    <Login v-show="isShowLoginModel" />
    <!-- 提示框 -->
    <Toast v-show="isShowToast" />
  </div>
</template>
<script>
import TopBar from "@/components/TopBar.vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import Login from "@/components/Login.vue";
import Toast from "@/components/Toast.vue";
import { mapState } from "vuex";

// import axios from "axios";
// 导入装好的request
// import axios from "@/request/request.js";
import { JingpinAPI } from "@/request/api";

export default {
  components: {
    TopBar,
    Header,
    Footer,
    Login,
    Toast,
  },
  computed: {
    ...mapState({
      isShowLoginModel: (state) => state.showModel.isShowLoginModel,
      isShowToast: (state) => state.showToast.isShowToast,
    }),
  },
  async created() {
    // 缺点：
    // 1、服务器url地址都一样，每个组件调用时都需要复制过去 -- request
    //    一旦接口地址发生变化，所有调用了接口的组件都需要修改 -- 统一管理接口 api.js
    // 2、每次请求时都需要手动编写config携带token（多个组件携带代码重复）
    // 3、优化then()写法，async+await写法

    // axios.get(url[,config])
    // axios.get("/products/recommend").then(

    /* JingpinAPI().then(
      (res) => {
        console.log("res22：", res); // 在network中看，请求地址，响应结果
      },
      (err) => {
        console.log("err22：", err);
      }
    ); */
    let res = await JingpinAPI();
    // console.log("res3(async+await)：", res);
  },
};
</script>
<style lang="less">
</style>
